<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title th:text="#{myinfopage.title}"></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->

		<link rel="stylesheet" href="css/css.css" th:href="@{/css/min.css}"/>            
        <script src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js" th:src="@{http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js}"></script>
        <script th:inline="javascript">/*<![CDATA[*/
        window.jQuery || document.write('<script src="'+ /*[[@{/js/vendor/jquery-1.9.0.min.js}]]*/ 'js/vendor/jquery-1.9.0.min.js'
        		+'"><\/script>')
        /*]]>*/</script>
        <script type="text/javascript" th:src="@{/js/econgen.js}"></script>
        <script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
			$(function(){
				var $editEles = $('#myInfo input, #confirm, #cancel, #password-li'),
					$showEles = $('#myInfo span, #edit');
					$editEles.hide();
					$showEles.show();

				var x = /*[[${modifyResult}]]*/'';
				if(x === true){
					alert(/*[[#{myinfopage.js.modifysuccess}]]*/''
						);
				} else if(x === false){
					alert(/*[[#{myinfopage.js.modifyfailed}]]*/''
						);
				}
				
				$('#edit').bind('click', function(){
					$editEles.show();
					$showEles.hide();
				});
				$('#cancel').bind('click', function(){
					$editEles.hide();
					$showEles.show();
				})
			});
        function confirmForm(){
        	if($('#password').val() == ''){
        		alert(/*[[#{myinfopage.js.password.blank}]]*/''
        			);
        		return false;
        	}
        	return confirm(/*[[#{myinfopage.js.submit.confirm}]]*/''
        		);
        }
        /*]]>*/</script>
    </head>
    <body>
        <header th:substituteby="common/template::header"></header>
        <div class="container">
        	<div class="row">
        		<h1 th:text="#{myinfopage.content.title}"></h1>
        	</div>
        	<hr/>
        	<form th:action="@{/i/myInfo}" method="post">
	        	<div class="row">
	        		<div class="ninecol">
	        			<input name="id" th:value="${session.session_user.id}" type="hidden"/>
	        			<ul id="myInfo">
	        				<li>
	        					<label th:text="#{myinfopage.content.username}"></label>
	        					<span th:text="${session.session_user.username}"></span>
	        					<input id="username" name="username" th:value="${session.session_user.username}" readonly="readonly"/>
	        				</li>
	        				<li>
	        					<label th:text="#{myinfopage.content.email}"></label>
	        					<span th:text="${session.session_user.email}"></span>
	        					<input id="email" name="email" th:value="${session.session_user.email}" th:readonly="${session.session_user.mobileVerified}"/>
	        					<a class="form-btn" style="margin-left: 20px;" th:text="#{myinfopage.content.modifyemail}"></a>
	        				</li>
	        				<li>
	        					<label th:text="#{myinfopage.content.mobile}"></label>
	        					<span th:text="${session.session_user.mobile}"></span>
	        					<input id="mobile" name="mobile" th:value="${session.session_user.mobile}"/>
	        				</li>
	        				<li>
	        					<label th:text="#{myinfopage.content.firstname}"></label>
	        					<span th:text="${session.session_user.lastName}"></span>
	        					<input id="lastName" name="lastName" th:value="${session.session_user.lastName}"/>
	        				</li>
	        				<li>
	        					<label th:text="#{myinfopage.content.lastname}"></label>
	        					<span th:text="${session.session_user.firstName}"></span>
	        					<input id="firstName" name="firstName" th:value="${session.session_user.firstName}"/>
	        				</li>
	        				<li>
	        					<hr/>
	        				</li>
	        				<li id="password-li">
	        					<label th:text="#{myinfopage.content.password}"></label>
	        					<input id="password" name="password" type="password"/>
	        				</li>
	        			</ul>
	        		</div>
	        		<div class="threecol last">
	        			<p>
		        			<button id="edit" class="form-btn" type="button"><i class="icon-cogs"></i><span th:text="#{myinfopage.content.edit}"></span></button>
		        			<button id="confirm" class="form-btn" type="submit" onclick="return confirmForm();"><i class="icon-checkmark"></i><span th:text="#{myinfopage.content.submit}"></span></button>
	        			</p>
	        			<p>
		        			<button id="cancel" class="form-btn" type="button"><i class="icon-close"></i><span th:text="#{myinfopage.content.cancel}"></span></button>
	        			</p>
	        		</div>
	        	</div>
        	</form>
        </div>

        <footer th:substituteby="common/template::footer"></footer>
        
    </body>
</html>
